<template>
  <div class="add" style="position: fixed; top: 0; width: 100%; height: 2000px; background: white">
    <div style="width: 100%;height: 55px;background: white;display: flex" @click="fanhui">
      <div style="font-family: 'Avenir';font-size: 20px;margin: 15px 0 20px 20px"><van-icon name="arrow-left" /></div>
    </div>
    <div style="width: 85%;height: 220px;margin: 30px 0 0 30px">
      <div style="font-weight: bold; font-size: 30px; text-align: left;" v-if="this.query.name=='电话'" >更换手机号</div>
      <div style="font-weight: bold; font-size: 30px; text-align: left;" v-if="this.query.name=='登录密码'" >修改登录密码</div>
      <div style="font-weight: bold; font-size: 30px; text-align: left;" v-if="this.query.name=='支付密码'" >修改支付密码</div>
      <div style="font-weight: bold; font-size: 30px; text-align: left;" v-if="this.query.name=='注销'" >安全验证</div>
      <div style="font-weight: bold; font-size: 16px; text-align: left;display: flex">
        请输入
        {{this.xphone}}
        收到的短信验证码已完成身份验证~</div>
    </div>
    <van-field
        style=";width: 85%;margin-left: 30px; border-bottom: 1px solid lightgray;"
        v-model="sms"
        center
        clearable

        placeholder="验证码"
    >
      <template #button>
        <van-button
            :size="small"
            type="primary"
            :style="{
               background: '#eaebff',
               color: 'dodgerblue',
               'border-radius': '20px',
               padding: '10px',
               width: '120px',
               border: 'white',
               'font-weight': 'bold',
               height: '30px'
            }"
            :disabled="isDisabled"
            @click="startCountdown"
        >{{ buttonText }}</van-button>
      </template>
    </van-field>

    <van-button type="primary" style="width: 85%; height: 45px; background: #51b8ff;
     border: white; font-size: 18px; margin-top: 40px; border-radius:50px;" v-if="this.query.name=='电话'"   @click="phoneUpdate"  >下一步</van-button>
    <van-button type="primary" style="width: 85%; height: 45px; background: #51b8ff;
     border: white; font-size: 18px; margin-top: 40px; border-radius:50px;" v-if="this.query.name=='登录密码'" @click="passwordUpdate" >下一步</van-button>
    <van-button type="primary" style="width: 85%; height: 45px; background: #51b8ff;
     border: white; font-size: 18px; margin-top: 40px; border-radius:50px;" v-if="this.query.name=='支付密码'" @click="payUpdate" >下一步</van-button>
    <van-button type="primary" style="width: 85%; height: 45px; background: #51b8ff;
     border: white; font-size: 18px; margin-top: 40px; border-radius:50px;" v-if="this.query.name=='注销'" @click="logout" >下一步</van-button>

  </div>
</template>

<script>
import { ref } from 'vue';

import {Delete, userUpdate, yzm} from "@/api/SetUp/AccountSafe/accountSafa"

import axios from "axios";

export default {
  setup() {
    const sms = ref('');

    return { sms};
  },
  data() {
    return {
      remainingTime: 60,
      isDisabled: false,
      buttonText: '获取验证码',
      query:{
        name:null
      },
      yzm:null,
      count:0,
      xphone:'',
      user:JSON.parse(localStorage.getItem('login')),
    };
  },
  created() {
    this.phoneXing();
    this.query=this.$route.query;
  },
  methods: {
    phoneXing(){
      this.xphone=this.user.phone.substring(0,3)+'****'+this.user.phone.substring(7,11);
    },
    startCountdown(){
      yzm(this.user.phone).then(row => {
        console.log(row)
        if(row.data.code==200){
          this.yzm=row.data.data;
          this.$toast('验证码已发送');
          this.count=1;
        }else{
          this.$toast('网络繁忙，稍后再试');
        }

      })
      if (this.remainingTime === 60) {
        this.isDisabled = true;
        const countdownInterval = setInterval(() => {
          this.remainingTime--;
          this.buttonText = `${this.remainingTime}s`;
          if (this.remainingTime === 0) {
            clearInterval(countdownInterval);
            this.isDisabled = false;
            this.buttonText = '重新获取';
          }
        }, 1000);
      }
    },
    fanhui(){
      this.$router.push('/accountSafe')
    },
    phoneUpdate(){
      if(this.count==0) {
        this.$toast('请先获取验证码');
      }else if(this.sms==null){
        this.$toast('请输入验证码');
      }else if(this.sms!=this.yzm){
        this.$toast('验证码错误');
      }else if(this.sms==this.yzm){
        this.$router.push('/newPhone')
      }
    },
    passwordUpdate(){

      if(this.count==0) {
        this.$toast('请先获取验证码');
      }else if(this.sms==null){
        this.$toast('请输入验证码');
      }else if(this.sms!=this.yzm){
        this.$toast('验证码错误');
      }else if(this.sms==this.yzm){
        this.$router.push('/newPassword')
      }
      this.$router.push('/newPassword')
    },
    payUpdate(){
      if(this.count==0) {
        this.$toast('请先获取验证码');
      }else if(this.sms==null){
        this.$toast('请输入验证码');
      }else if(this.sms!=this.yzm){
        this.$toast('验证码错误');
      }else if(this.sms==this.yzm){
        this.$router.push('/newpayPassword')
      }
      this.$router.push('/newpayPassword')
    },
    logout(){
      if(this.count==null) {
        this.$toast('请先获取验证码');
      }else if(this.sms==null){
        this.$toast('请输入验证码');
      }else if(this.sms!=this.yzm){
        this.$toast('验证码错误');
      }else if(this.sms==this.yzm){
        this.user.isDel=2
        Delete(this.user).then(row => {
            this.$toast('注销成功');
            this.$router.push('/right')
        })
      }
    }
  },

};

</script>

<style scoped>

</style>
